<template>
  <div class="dialog-overlay" :class="{'active': overlayActive}" @click.self="close">
    <div class="dialog-content" :class="{'bounce-in': animate}">
      <!-- 标题栏 -->
      <div class="dialog-header">
        <div class="dialog-title">
          <h2>{{ getDialogTitle() }}</h2>
          <div class="title-underline"></div>
        </div>
        <button class="close-btn" @click="close">
          <i class="iconfont icon-close"></i>
        </button>
      </div>
      
      <!-- 内容区域 -->
      <div class="dialog-body">
        <div class="order-info">
          <div class="info">
            <div class="top">
              <div class="label">场次</div>
              <div class="status">{{ currentItem.has_material === '1' ? '已提交' : '待提交' }}</div>
            </div>
            <div class="main">{{ currentItem.customer_name }} - {{ currentItem.type }}</div>
          </div>
        </div>

        <div class="form-section">
          <div class="section-header">
            <div class="header-line"></div>
            <text class="header-text">场次详情</text>
          </div>

          <div class="order-detail">
            <div class="detail-row">
              <span class="label">订单号:</span>
              <span class="value">{{ currentItem.order_number }}</span>
            </div>
            <div class="detail-row">
              <span class="label">日期:</span>
              <span class="value">{{ formatDateRange(currentItem.start_date, currentItem.end_date) }}</span>
            </div>
            <div class="detail-row">
              <span class="label">摄影师:</span>
              <span class="value">{{ currentItem.member_name || '未分配' }}</span>
            </div>
            <div class="detail-row">
              <span class="label">状态:</span>
              <span class="value">{{ currentItem.status }}</span>
            </div>
          </div>
        </div>

        <!-- 上传素材表单 -->
        <div class="form-section" v-if="type === 'upload'">
          <div class="section-header">
            <div class="header-line"></div>
            <text class="header-text">素材提交</text>
          </div>
          
          <div class="form-group">
            <label>
              <i class="iconfont icon-link"></i>
              素材链接 <span class="required">*</span>
            </label>
            <textarea
              v-model="materialLink"
              placeholder="请输入素材链接(支持网盘等链接)"
              class="form-textarea"
              rows="3"
            ></textarea>
          </div>
        </div>

        <!-- 查看素材内容 -->
        <div class="form-section" v-if="type === 'material' && currentItem.m_link">
          <div class="section-header">
            <div class="header-line"></div>
            <text class="header-text">素材内容</text>
          </div>
          
          <div class="material-content">
            <div class="material-link">
              <i class="iconfont icon-link"></i>
              <a :href="currentItem.m_link" target="_blank">{{ currentItem.m_link }}</a>
            </div>
            <div class="preview-tip" v-if="!currentItem.has_preview">
              <i class="iconfont icon-info"></i>
              <span>暂无预览图</span>
            </div>
            <div class="preview-images" v-else>
              <!-- 这里可以添加预览图展示 -->
              <div class="preview-item" v-for="(img, index) in previewImages" :key="index">
                <img :src="img" alt="素材预览">
              </div>
            </div>
          </div>
        </div>

        <!-- 订单详情 -->
        <div class="form-section" v-if="type === 'detail'">
          <div class="section-header">
            <div class="header-line"></div>
            <text class="header-text">订单详情</text>
          </div>
          
          <div class="order-detail">
            <div class="detail-row">
              <span class="label">客户姓名:</span>
              <span class="value">{{ currentItem.customer_name }}</span>
            </div>
            <div class="detail-row">
              <span class="label">联系电话:</span>
              <span class="value">{{ currentItem.phone }}</span>
            </div>
            <div class="detail-row">
              <span class="label">订单金额:</span>
              <span class="value">¥{{ currentItem.total_amount }}</span>
            </div>
            <div class="detail-row">
              <span class="label">支付方式:</span>
              <span class="value">{{ currentItem.payment_method }}</span>
            </div>
            <div class="detail-row" v-if="currentItem.note">
              <span class="label">备注:</span>
              <span class="value">{{ currentItem.note }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 操作栏 -->
      <div class="dialog-footer">
        <button class="btn cancel-btn" @click="close">
          <i class="iconfont icon-arrow-left"></i>
          <span class="btn-text">关闭</span>
        </button>
        <button 
          class="btn submit-btn" 
          v-if="type === 'upload'"
          @click="submitMaterial"
          :disabled="!materialLink"
        >
          <i class="iconfont icon-correct"></i>
          <span class="btn-text">提交</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { post } from "@/request"

const props = defineProps({
  type: {
    type: String,
    required: true,
    validator: value => ['upload', 'material', 'detail'].includes(value)
  },
  item: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['close', 'submit'])

const animate = ref(false)
const overlayActive = ref(false)
const materialLink = ref('')
const currentItem = ref({})
const previewImages = ref([])

// 初始化数据
watch(() => props.item, (newVal) => {
  currentItem.value = newVal
  materialLink.value = newVal.m_link || ''
}, { immediate: true })

const getDialogTitle = () => {
  return {
    'upload': '上传素材',
    'material': '查看素材',
    'detail': '订单详情'
  }[props.type]
}

const formatDateRange = (startDate, endDate) => {
  if (startDate === endDate) return startDate
  return `${startDate} 至 ${endDate}`
}

const submitMaterial = async () => {
  try {
    const res = await post("/material/upload", {
      order_id: currentItem.value.id,
      m_link: materialLink.value
    })
    
    if (res && res.code === 200) {
      emit('submit', {
        ...currentItem.value,
        has_material: '1',
        m_link: materialLink.value
      })
      close()
    }
  } catch (error) {
    console.error('上传素材失败:', error)
  }
}

const close = () => {
  animate.value = false
  overlayActive.value = false
  setTimeout(() => emit('close'), 350)
}

onMounted(() => {
  animate.value = true
  setTimeout(() => {
    overlayActive.value = true
  }, 50)
})
</script>

<style lang="less" scoped>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
  font-family: var(--font-family-base);
  transition: background-color 0.3s ease-out;

  &.active {
    background-color: rgba(0, 0, 0, 0.45);
  }

  .dialog-content {
    width: 600px;
    max-width: 90vw;
    background: var(--bs-bg-color);
    border-radius: var(--border-radius-base);
    overflow: hidden;
    transform: translateY(40px) scale(0.95);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

    &.bounce-in {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .dialog-header {
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--bs-theme-color);
      color: white;

      .dialog-title h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }

      .title-underline {
        height: 2px;
        width: 40px;
        background: white;
        border-radius: 1px;
        margin-top: 6px;
      }

      .close-btn {
        width: 32px;
        height: 32px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: white;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;

        &:hover {
          background: rgba(255, 255, 255, 0.3);
        }
      }
    }

    .dialog-body {
      padding: 20px;

      .order-info {
        margin-bottom: 20px;
        
        .info {
          background: var(--bs-theme-color);
          color: #fff;
          padding: 15px;
          border-radius: 8px;
          display: flex;
          flex-direction: column;
          
          .top {
            display: flex;
            justify-content: space-between;
            color: #cbe0ef;
            font-size: 14px;
          }
          
          .main {
            padding: 8px 0;
            font-size: 18px;
            font-weight: 600;
            color: var(--bs-bg-color);
          }
        }
      }

      .form-section {
        margin-bottom: 20px;
        background-color: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
      }

      .section-header {
        display: flex;
        align-items: center;
        height: 50px;
        padding: 0 20px;
        border-bottom: 1px solid var(--bs-border-color);
      }

      .header-line {
        width: 4px;
        height: 16px;
        background-color: var(--bs-theme-color);
        margin-right: 10px;
        border-radius: 2px;
      }

      .header-text {
        font-size: 16px;
        font-weight: bold;
        color: var(--bs-dark-color);
      }

      .order-detail {
        padding: 15px 20px;
        
        .detail-row {
          display: flex;
          margin-bottom: 10px;
          font-size: 14px;
          
          .label {
            color: var(--bs-gray-color);
            margin-right: 10px;
            width: 80px;
          }
          
          .value {
            color: var(--bs-text-color);
          }
        }
      }

      .form-group {
        padding: 15px 20px;

        label {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: var(--bs-nav-link-color);
          margin-bottom: 8px;

          .iconfont {
            margin-right: 6px;
            font-size: 14px;
          }
          
          .required {
            color: #f56c6c;
            margin-left: 4px;
          }
        }

        .form-textarea {
          width: 100%;
          padding: 10px;
          border: 1px solid var(--bs-border-color);
          border-radius: 4px;
          font-size: 14px;
          transition: all 0.3s;
          background: white;
          resize: vertical;
          min-height: 80px;

          &:focus {
            outline: none;
            border-color: var(--bs-theme-color);
            box-shadow: 0 0 0 2px rgba(0, 145, 190, 0.1);
          }
        }
      }

      .material-content {
        padding: 15px 20px;
        
        .material-link {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          
          .iconfont {
            margin-right: 8px;
            color: var(--bs-theme-color);
          }
          
          a {
            color: var(--bs-theme-color);
            word-break: break-all;
          }
        }
        
        .preview-tip {
          display: flex;
          align-items: center;
          color: var(--bs-gray-color);
          font-size: 14px;
          
          .iconfont {
            margin-right: 8px;
          }
        }
        
        .preview-images {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
          margin-top: 15px;
          
          .preview-item {
            border: 1px solid var(--bs-border-color);
            border-radius: 4px;
            overflow: hidden;
            
            img {
              width: 100%;
              height: auto;
              display: block;
            }
          }
        }
      }
    }

    .dialog-footer {
      padding: 15px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      background: var(--bs-bg-color);
      border-top: 1px solid var(--bs-border-color);

      .btn {
        padding: 8px 16px;
        border-radius: 4px;
        border: 1px solid var(--bs-border-color);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s;

        &:disabled {
          opacity: 0.6;
          cursor: not-allowed;
        }

        &.cancel-btn {
          background: white;
          color: var(--bs-text-color);

          &:hover {
            background: var(--bs-gray-color);
            transform: translateY(-1px);
          }
        }

        &.submit-btn {
          background: var(--bs-theme-color);
          color: white;
          border-color: var(--bs-dark-color);

          &:hover:not(:disabled) {
            background: var(--bs-dark-color);
            transform: translateY(-1px);
          }
        }
      }
    }
  }
}

@keyframes bounce {
  0%, 100% { 
    transform: translateY(0) scale(1); 
  }
  50% { 
    transform: translateY(-8px) scale(1.05); 
  }
}
</style>